HTMLify
style.css
Views: 18 | Author: cody
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | body { height: 100vh; display: flex; justify-content: center; align-items: center; } svg { overflow: visible; } svg path#line { fill: none; stroke: #e00000; stroke-width: 2; stroke-linecap: butt; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray:none; stroke-opacity: 1; stroke-dasharray: 1; stroke-dashoffset: 1; animation: dash 4s linear infinite; } svg path#heart { transform-origin: 50% 50%; animation: blink 4s linear infinite; } @keyframes dash { 0% { stroke-dashoffset: 1; } 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } } @keyframes blink { 0% { opacity: 0; transform: scale(0); } 60% { opacity: 0; transform: scale(0); } 70% { opacity: 1; transform: scale(1.2); } 75% { opacity: 1; transform: scale(1.0); } 80% { opacity: 1; transform: scale(1.2); } 85% { opacity: 1; transform: scale(1.0); } 100% { opacity: 0; transform: scale(1.0); } } |